<template>
 <div>
 	<ol class="breadcrumb">
      <li class="breadcrumb-item">日志列表</li>
  	</ol>
  	<div class="biaoqing-container">
  		<div class="biaoqing-table">
        <div class="clearfloat search-container flex-center">
          <div class="btn-group btn-group-sm fl">
            <button @click="getLogs(1,0)" type="button" class="btn btn-outline-primary" :class="{active:(type == '' && type==0)}">所有</button>
            <button @click="getLogs(1,1)" type="button" class="btn btn-outline-primary" :class="{active:(type != '' && type==1)}">鉴黄</button>
          </div>
          <div class="input-group search fl">
            <input @keyup.enter="searchOperateId" type="text" class="form-control" v-model="operateId" placeholder="输入操作ID" aria-label="Search for...">
            <span class="input-group-btn">
			          <button @click="searchOperateId" class="btn btn-secondary" type="button">Search</button>
			        </span>
          </div>
          <span class="cursor fl pass-success clear-model-user" @click="clearSearch">清除</span>

        </div>
  			<table class="table table-hover ">
  				<thead>
  					<tr>
              <th v-if="type==1">原图</th>
  						<th>操作目标</th>
  						<th>操作类型</th>
  						<th>操作方式</th>
  						<th>操作描述</th>
  						<th>操作时间</th>
  						<th>操作人</th>
  					</tr>
  				</thead>
  				<tbody>
  					<tr v-for="(log,index) in logs.items">
              <td v-if="type != '' && type == 1" @mouseenter="bigImg"  @mouseleave="clearbigImg" class="img-view">
                <div class="biaoqing-list-cover">
                  <img class="biaoqing-list-cover-img" :data-height="log.subject.coverHeight" :data-width="log.subject.coverWidth" :src="[log.subject.fullCover]" alt="">
                </div>
              </td>
  						<td>
  							<router-link v-if="log.type==1" class="hover-line" :to="'/subjectdetail/'+log.operateId">
  								{{log.operateId}}
  							</router-link>
  							<router-link v-if="log.type==2" class="hover-line" :to="'/topicdetail/'+log.operateId">
  								{{log.operateId}}
  							</router-link>
							<router-link v-if="log.type==3" class="hover-line" to="/stickerlist">
  								{{log.operateId}}
  							</router-link>
  							<router-link v-if="log.type==4" class="hover-line" :to="'/userdetail/'+log.operateId">
  								{{log.operateId}}
  							</router-link>
  							<router-link v-if="log.type==5" class="hover-line" :to="'/comments?id='+log.operateId">
  								{{log.operateId}}
  							</router-link>
  						</td>
  						<td>{{log.operateDesc}}</td>
  						<td>
  							<span v-if="log.platform==1">
  								<span v-if="log.parameters=='自动处理'">{{log.parameters}}</span>
  								<span v-else>后台</span>
  							</span>
  							<span v-else>APP</span>
  						</td>
  						<td class="max-width100">
  							<span :title="log.remark">{{log.remark}}</span>
  						</td>
  						<td>{{log.createTime}}</td>
  						<td>{{log.userName}}</td>
  					</tr>
  				</tbody>
  			</table>
  			<Pagepublic :pages="logs" @paging="getLogs"></Pagepublic>
  		</div>
  	</div>
 </div>
</template>
<script>
import Pagepublic from '../../widgets/pagepublic.vue'
import { Logs } from '../../resources'
import { viewImg, clearViewImg,formatTime } from '../../misc/utils'

export default {
	data: () => ({
		loading: false,
		logs:'',
    type:'',
    operateId:'',
	}),
	beforeRouteEnter (to,form,next) {
		var params = {
			pageNum:1
		}
    Promise.all([Logs.list(params)]).then(([logs]) => {
			logs.data.data.items.forEach(item=>{
				item.createTime=formatTime(item.createTime)
			})

    		next(vm => {
    			vm.logs=logs.data.data;
    		})
		})
	},
	mounted () {
     	this.$emit('loaded')
    },
    methods:{
      clearbigImg(e){clearViewImg(e)},
      bigImg(e){viewImg(e,400)},
	    getLogs(pageNum,type) {
        this.$emit('loaded',true)
        var params = {pageNum:pageNum}
        if (type == undefined) {type = this.type;}
        if (type == 1) params.shielded = true;

        var operateId = this.operateId;
        params.operateId = operateId;

        this.type = type;
        Promise.all([Logs.list(params)]).then(([logs]) => {
          this.$emit('loaded',false)
          logs.data.data.items.forEach(item=>{
            item.createTime=formatTime(item.createTime)
          })
          this.logs  =logs.data.data;

        })
      },
      searchOperateId(){
        var operateId = this.operateId;
        var type = this.type;
        this.$emit('loaded',true)
        var params = {
          pageNum:1,
          pageSize:10,
          operateId:operateId
        }
        if (type != undefined && type == 1) params.shielded = true;
        Promise.all([Logs.list(params)]).then(([logs]) => {
          this.$emit('loaded',false)
          logs.data.data.items.forEach(item=>{
            item.createTime=formatTime(item.createTime)
          })
          this.logs = logs.data.data;
        })
      },
      clearSearch(){
        this.operateId = '';
        this.getLogs(1, this.type);
      }
    },
    components:{Pagepublic}
}

</script>
<style>
  .search {
    max-width: 300px;
    margin-left: 10px;
  }
</style>
